<%--
  Created by IntelliJ IDEA.
  User: 74018
  Date: 2019/1/4
  Time: 18:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户汽车</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
</head>
<body>
    <div class="container">
        <div class="container">
            <table id="tb"></table>
        </div>
    </div>

    <!-- Button trigger modal -->

    <form action="#" id="myTool" class="form-inline">
        <button type="button" onclick="toseveCar();" class="btn btn-primary btn-lg" >
            添加用户车辆
        </button>
    </form>
    <!-- 添加 -->
    <div class="modal fade" id="modelAdd" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modelTitleId">添加用户汽车</h4>
                </div>
                <form action="#" class="form-horizontal" id="addCarForm">
                <div class="modal-body">
                        <div class="form-group">
                            <lable for="" class="col-sm-2 control-label">车辆品牌</lable>
                            <div class="col-sm-10">
                                <input name="gid" type="hidden" >
                                <input class="form-control" name="carBrand" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <lable for="" class="col-sm-2 control-label">车辆型号</lable>
                            <div class="col-sm-10">
                                <input class="form-control" name="carModel" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <lable for="" class="col-sm-2 control-label">备注信息</lable>
                            <div class="col-sm-10">
                                <input class="form-control" name="note" type="text">
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-secondary" onclick="formInit();" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="seveCar();">保存</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <!--修改-->
    <!-- Modal -->
    <div class="modal fade" id="modelUp" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modelTitleIdUp">修改汽车信息</h4>
                </div>
                <form action="#" class="form-horizontal" id="upCarForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <lable for="" class="col-sm-2 control-label">车辆品牌</lable>
                            <div class="col-sm-10">
                                <input name="id" type="hidden" >
                                <input name="gid" type="hidden" >
                                <input class="form-control" name="carBrand" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <lable for="" class="col-sm-2 control-label">车牌号</lable>
                            <div class="col-sm-10">
                                <input class="form-control" name="carModel" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <lable for="" class="col-sm-2 control-label">备注信息</lable>
                            <div class="col-sm-10">
                                <input class="form-control" name="note" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-secondary" onclick="formInit();" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="seveUpCar();">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#tb").bootstrapTable({
            url:"${pageContext.request.contextPath}/guests/query",
            toolbar:'#myTool',//工具按钮用哪个容器
            striped: true,//隔行换色
            showRefresh: true,//是否显示刷新按钮
            height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            showToggle:true,//是否显示详细视图和列表视图的切换按钮
            detailView:true,//是否显示父子表
            onExpandRow:function(index,row,$detail){
                var table = $detail.html("<table class='myTb'></table>").find("table");
                table.bootstrapTable({
                    url:'/repair/getCar?id='+row.id+'',
                    uniqueId: "id",
                    columns:[{
                        checkbox:false
                    },{
                        field:'id',
                        title:'编号'
                    },{
                        field:'carBrand',
                        title:'品牌'
                    },{
                        field:'carModel',
                        title:'车牌号'
                    },{
                        field:'note',
                        title:'备注'
                    },{
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class='btn btn-primary' onclick='fuWu("+row.id+","+row.gid+")'><span class='glyphicon glyphicon-pencil'></span>&nbsp;服务</button>"+"&nbsp;&nbsp;<button class='btn btn-primary' onclick='upCar("+row.id+",this)'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>"+"&nbsp;&nbsp;<button class='btn btn-primary' onclick='delCar("+row.id+",this,"+row.gid+")'><span class='glyphicon glyphicon-pencil'></span>&nbsp;删除</button>";
                        }
                    }]
                })},
                    pagination:true, //是否显示分页（*）
            pageSize : 4,//单页记录数
            pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
            columns:[{
                checkbox:true,
            },{
                field:'id',
                title:'编号'
            },{
                field:'name',
                title:'姓名'
            },{
                field:'phone',
                title:'电话'
            },{
                field:'email',
                title:'邮件',
            },{
                field:'address',
                title:'地址'
            },{
                field:'note',
                title:'备注'
            },{
                field:'sex',
                title:'性别'
            }]
        })
    });

    function toseveCar() {
        var row = $("#tb").bootstrapTable("getSelections") ;
        if (row.length!=1){
            swal("提示信息", "请选择一条数据!", "error");
        }else{
            $("#modelAdd").modal("show");
            var item = row[0];
            $("#addCarForm [name='gid']").val(item.id);
        }
    }
    function seveCar() {
        var formStr=$('#addCarForm').serialize();
        var params = decodeURIComponent(formStr,true);
        $.ajax({
            url:"${pageContext.request.contextPath}/repair/addCar",
            data:params,
            success:function (data) {
                if(data>0){
                    swal("提示信息", "添加成功!", "success");
                    formInit();
                }else{
                    swal("提示信息", "添加失败!", "error");
                }
                $('#modelAdd').modal('hide');
            }
        })
    }
    function formInit() {
        $("#addCarForm :input").val("");
    }
    var tableEle ;
    function upCar(id,ele){
        var table = $(ele).parents('.myTb');
        tableEle = table;
        var data = table.bootstrapTable('getRowByUniqueId', id)
        console.log(data);
        $("#upCarForm [name=id]").val(data.id);
        $("#upCarForm [name=carBrand]").val(data.carBrand);
        $("#upCarForm [name=carModel]").val(data.carModel);
        $("#upCarForm [name=note]").val(data.note);
        $("#upCarForm [name=gid]").val(data.gid);
        $("#modelUp").modal("show");
    }
    function fuWu(id,gid){
        location.href = "${pageContext.request.contextPath}/repairOrder/toOrder?cid="+id+"&gid="+gid;
    }
    function delCar(id,ele,gid) {
        var table = $(ele).parents('.myTb');

        swal({
            title: "您确定要删除这条信息吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function () {
            var options = $("#usertb").bootstrapTable('getOptions') ;
            $.post("${pageContext.request.contextPath}/repair/delCar",{'id': id},function(data){
                if (data>0){
                    //友好的提示
                    swal("提示信息！", "您已经永久删除了这条信息。", "success");
                    $.post("${pageContext.request.contextPath}/repair/getCar",{'id':gid},function (data) {
                        table.bootstrapTable("load", data);
                    });
                }else{
                    //友好的提示
                    swal("提示信息！", "删除失败。", "error");
                }
            });
        });
    }
    function seveUpCar() {
        var formStr=$('#upCarForm').serialize();
        var params = decodeURIComponent(formStr,true);
        var table = $('.myTb');
        var gid = $("#upCarForm [name=gid]").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/repair/upCar",
            data:params,
            success:function (data) {
                if(data>0){
                    swal("提示信息", "修改成功!", "success");
                    $.post("${pageContext.request.contextPath}/repair/getCar",{'id':gid},function (data) {
                        console.log(data);
                        table.bootstrapTable("load", data);
                    });
                    formInit();
                }else{
                    swal("提示信息", "修改失败!", "error");
                }
                $('#modelUp').modal('hide');
            }
        })
    }
</script>
